<!DOCTYPE html>
<html>


<script>
function login()
{
	setInterval(fetchMessages,3000);

	var oReq = new XMLHttpRequest();
	oReq.open("GET", getDns() + "/Team_27/REST/GET/login", false);
	oReq.onload = function()
	{
		document.getElementById( "userLabel" ).value = oReq.responseText;
		document.getElementById("loginButton").disabled = true;
	}
	oReq.send();
	fetchMessages();
	return true;
}

function send()
{
	var outMessage = document.getElementById("outBox").value;
	
	var url = getDns() + "/Team_27/REST/";
	var mes = "{ \"id\":\"" + document.getElementById( "userLabel" ).value + "\", \"message\":\"" + outMessage + "\"}";
	
	var client = new XMLHttpRequest();

	client.open("PUT", url, false);
	client.setRequestHeader("Content-Type", "application/json");
	
	client.onreadystatechange = function () 
	{
		if (client.status == 200)
		{
			console.log("The request succeeded!\n\nThe response representation was:\n\n" + client.responseText);
			fetchMessages()			
			document.getElementById( "outBox" ).value = "";
			updateMoney();
		}
		else
			console.log("The request did not succeed!\n\nThe response status was: " + client.status + " " + client.statusText + ".");
	}
	client.send(mes);
}

function fetchMessages()
{
	var oReq = new XMLHttpRequest();
	oReq.open("GET", getDns() + "/Team_27/REST/GET/messages", false);
	oReq.onreadystatechange = function()
	{
		document.getElementById( "inBox" ).Value = "";
		var newInBox = "";
		var data = JSON.parse( oReq.responseText );
		for( var i in data.message )
		{
			var id = data.message[i].id;
			var m = data.message[i].message;
			newInBox = newInBox.concat( id + " : " + m + "\n" );
		}
		var inbox = document.getElementById( "inBox" );
		inbox.value = newInBox;
		inbox.scrollTop = inbox.scrollHeight;
		document.getElementById( "inBox" ).scro
	}
	oReq.send();
}

function updateMoney()
{
	
	var oReq = new XMLHttpRequest();
	oReq.open("GET", getDns() + "/Team_27/REST/GET/charges?id=" + document.getElementById( "userLabel" ).value, false);
	oReq.onload = function()
	{
		document.getElementById( "moneyLabel" ).value = oReq.responseText;
	}
	oReq.send();	
	return true;
}

function logout()
{
	var oReq = new XMLHttpRequest();
	oReq.open("GET", getDns()+ "/Team_27/REST/GET/logout?id=" + document.getElementById( "userLabel" ).value, false);
	oReq.onload = function()
	{
		document.getElementById("loginButton").disabled = false;
		document.getElementById("userLabel").value = "";
		document.getElementById("moneyLabel").value = "";
		alert( "You owe $" + oReq.responseText );
	}
	
	oReq.send();
}

function getDns()
{
	var dns = document.getElementById( "publicDns" ).value;
	dns = trimSlash( dns );
	return addHttp( dns );
}

function addHttp( input )
{
	var h = "http://";
	var beginning = input.substring(0, h.length );
	if( beginning !=  h )
		return h + input;
	
	return input;
}

function trimSlash( input )
{
	var first = input.substring(0,1);
	if( input.substring(0,1) == "/" )
	{
		input = input.substring(1);
	}
	var last = input.charAt(input.length - 1);
	if( last == '/' )
		input = input.substring(0, input.length - 1 );
	return input;
}

</script>
<body>

<button id="loginButton" onclick="login()">Login</button><input readonly type='text' id="userLabel"></input>
<br>
Public DNS:
<br>
<input type='text' id="publicDns" value="localhost:8080/"> 
<br><br>
Inbox:
<br>
<textarea name="content" rows="10" cols="50" id="inBox">
</textarea>
<br><br>
Outbox:
<br>
<input type='text' id="outBox" value=""> 
<br>
<button onclick="send()">Send</button> $<input readonly type='text' id="moneyLabel"></input>
<p id="demo"></p>

<br><br><br><br>
<button onclick="logout()">Logout</button>
</body>
</html>
